import 'package:flutter/material.dart';

/// 2022年更新  适配 flutter 3.0
///FilterChip 可以用来结棍 Row 、 Column 来实现多先效果
class CastFiltePage extends StatefulWidget {
  const CastFiltePage({super.key});

  @override
  State createState() => CastFiltePageState();
}

class CastFiltePageState extends State<CastFiltePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //页面角手架
      appBar: AppBar(title: const Text("FilterChip")), //标题
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ///待选择的标签
            buildOriginTags(),
            const SizedBox(height: 44),

            ///已选择的标签
            buildSelectTags(),
          ],
        ),
      ),
    );
  }

  final List<String> _originTagList = ["测试1", "测试2", "测试3", "测试4"];

  buildOriginTags() {
    return Wrap(
      runSpacing: 10,
      children: _originTagList
          .map((e) => Padding(
                padding: const EdgeInsets.only(
                  left: 12,
                ),
                child: buildChipItem(e),
              ))
          .toList(),
    );
  }

  buildChipItem(String e) {
    return FilterChip(
      avatar: const CircleAvatar(
        child: Icon(
          Icons.home_repair_service,
          size: 14,
        ),
      ),
      //显示的文本
      label: Text(e),
      labelStyle: TextStyle(
          color: _selectTagList.contains(e) ? Colors.white : Colors.black),
      //未选中的颜色
      backgroundColor: Colors.grey[200],
      //选中的阴影色
      selectedShadowColor: Colors.orange,
      elevation: 10,
      //选中的颜色
      selectedColor: Colors.red,
      //选中切换事件
      onSelected: (bool select) {
        if (select) {
          //选中
          _selectTagList.add(e);
        } else {
          //未选中 移除
          _selectTagList.removeWhere((element) => element == e);
        }
        setState(() {});
      },
      //当前是否选中
      selected: _selectTagList.contains(e),
    );
  }

  List<String> _selectTagList = [];

  buildSelectTags() {
    return Text("当前选中的是 ${_selectTagList.join(",")}");
  }
}
